import { Button } from 'antd'
import React, { useMemo, useState } from 'react'
const list = [1, 3, 5, 7, 9]
/**
 * 当组件中的某一个值发生改变时，如果存在需要计算的值会重新进行计算；
 * 而 useMemo 可以缓存计算结果（类似 vue computed），只有在依赖项发生变化时重新计算
 */
const UseMemoComponent: React.FC = () => {
  const [count, setCount] = useState(0)

  // 每次点击按钮（setCount）会重新渲染此函数
  const totalNormal = () => {
    console.log('totalNormal')
    return list.reduce((prev, cur) => prev + cur)
  }

  // 类似 computed，有缓存，[] 关联属性才会重新执行
  const total = useMemo(() => {
    console.log('useMemo')
    return list.reduce((prev, cur) => prev + cur)
  }, [])

  return (
    <div>
      <p>{count}</p>
      <p>normal：{totalNormal()}</p>
      <p>useMemo：{total}</p>
      <Button onClick={() => setCount(count + 1)} type="primary">
        点击
      </Button>
    </div>
  )
}
export default UseMemoComponent
